<template>
	<div class="wrapper">
		<div class="cell-group">
		  <div class="cell">
			  <div class="label">联系人</div>
			  <input type="text" v-model="name" placeholder="输入昵称" />
		  </div>
		  <div class="cell">
			  <div class="label">手机号码</div>
			  <input type="number" v-model="phone" placeholder="输入手机号码">
		  </div>
		  <div class="cell">
			  <div class="label" >选择地址</div>
			  <picker mode="region" :range="addressArr" @change="addressChange">
				  <div v-if="!province" style="color:#eee">请选择地址</div>
				  <div  v-else>{{province}}-{{city}}-{{area}}</div>
			  </picker>
		  </div>
		  <div class="cell cell-address">
			  <div class="label">详细地址</div>
			  <textarea v-model="addressDetail" placeholder="请输入详细地址"  auto-height/>
		  </div>
		  <div class="cell">
		  		  <div class="label">邮政编码</div>
		  		  <input type="number" class="code" placeholder="输入邮政编码" v-model='code'>
		  </div>
		  <div class="cell">
		  		  <div class="label">是否默认</div>
				  <checkbox-group @change="checkboxChange">
				    <checkbox :checked="isDefault"  />
				  </checkbox-group>

		  </div>
		</div>
		
		<div class="btn-wrapper">
			<div class="btn btn-add" @click="newShippingAddress">
				提交保存
			</div>
			<div class="btn btn-delete">
				删除该地址
			</div>
		</div>
		
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				addressArr:[0,0,0],
				name:'',
				phone:'',
				province:'',
				city:'',
				area:'',
				addressDetail:'',
				code:'',
				isDefault:true,
				addressId:''
			};
		},
		methods:{
			addressChange(e){
				let address=e.detail.value;
				this.province=address[0];
				this.city=address[1];
				this.area=address[2];
			},
			checkboxChange(e){
				if(e.detail.value.length==0){
					this.isDefault=false
				}else{
					this.isDefault=true
				}
			},
			async newShippingAddress(){
				//新增编辑地址
				let params={
					consignee:this.name,
					phone:this.phone,
					province:this.province,
					city:this.city,
					area:this.area,
					add_detail:this.addressDetail,
					postcode:this.code,
					is_default:this.isDefault,
					id:this.addressId,
					user_token:uni.getStorageSync('userToken')
				}
				let res=await this.$api.newShippingAddress(params);
				console.log(res)
				
			},
			async getShippingAddress(){
				//获取收货地址
				let params={
					id:this.addressId,
					user_token:uni.getStorageSync('userToken')
				}
				let res=await this.$api.getShippingAddress(params);
				if(res.data.level=='success'){
					let data=res.data.data[0];
					console.log(data)
					this.name=data.consignee
					this.phone=data.phone
					this.province=data.province
					this.city=data.city
					this.area=data.area
					this.addressDetail=data.address_detail
					this.code=data.postcode,
					this.isDefault=data.is_default==0?false:true

				}
			},
		},
		onLoad(options) {
			this.addressId=options.addressId;
			if(this.addressId){
				this.getShippingAddress()
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '~@/static/scss/mixin.scss';
	.wrapper{
		background:rgba(241,244,247,1);
		min-height: 100vh;
		}
	.cell-group{
		background: #fff;
		padding:20rpx 36rpx;
		.cell{
			padding:30rpx 0;
			@include flex(flex-start);
			&:not(:last-of-type){
				border-bottom:1px solid #eee;
			}
			.label{
				font-size: 28rpx;
				font-weight: 600;
				width:150rpx;
			}
			.nick-input{
				padding:20rpx 0;
				width:100%;
				color:#6F7073;
			}
			.input{
				font-size: 28rpx;
				flex:1;
				text-align: right;
				color:#6F7073;
			}
			picker{
				flex:1;
			}

		}
		.cell-address{
			align-items: flex-start;
		}
	}
	
	.btn-wrapper{
		width: 100%;
		margin-bottom: 150rpx;
		.btn{
			margin: 20rpx 0;
			margin-left:30rpx;
			font-size:32rpx;
			text-align: center;
			font-weight: 600;
			
			width:calc(100vw - 60rpx);
			border-radius: 16rpx;
			height: 80rpx;
			line-height: 80rpx;
		}
		.btn-add{
			background: #FFE226;
		}
		.btn-delete{
			color:#078BFF
		}
	}
	
	
	
</style>
